<template>
  <div class="echarts-demo">
    <h2 class="section-title">Echarts 图表演示</h2>
    
    <!-- 全局控制面板 -->
    <div class="control-panel">
      <div class="theme-switcher">
        <span>主题：</span>
        <select v-model="currentTheme" @change="changeTheme">
          <option v-for="theme in themes" :key="theme.value" :value="theme.value">
            {{ theme.label }}
          </option>
        </select>
      </div>
      <button class="refresh-btn" @click="refreshData">
        刷新数据
      </button>
    </div>

    <div class="demo-grid">
      <!-- 基础图表 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>基础图表</h3>
          <button class="code-toggle" @click="toggleCode('basic')">
            {{ showCode.basic ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.basic">
            <pre class="code-viewer"><code>// 基础图表配置
const basicOption = {
  title: {
    text: '基础折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="basicChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 饼图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>饼图</h3>
          <button class="code-toggle" @click="toggleCode('pie')">
            {{ showCode.pie ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.pie">
            <pre class="code-viewer"><code>// 饼图配置
const pieOption = {
  title: {
    text: '访问来源',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' },
      { value: 484, name: '联盟广告' },
      { value: 300, name: '视频广告' }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="pieChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 柱状图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>柱状图</h3>
          <button class="code-toggle" @click="toggleCode('bar')">
            {{ showCode.bar ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.bar">
            <pre class="code-viewer"><code>// 柱状图配置
const barOption = {
  title: {
    text: '柱状图示例'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
  },
  series: [
    {
      name: '2011年',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012年',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="barChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 散点图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>散点图</h3>
          <button class="code-toggle" @click="toggleCode('scatter')">
            {{ showCode.scatter ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.scatter">
            <pre class="code-viewer"><code>// 散点图配置
const scatterOption = {
  title: {
    text: '散点图示例'
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'value',
    name: 'X轴'
  },
  yAxis: {
    type: 'value',
    name: 'Y轴'
  },
  series: [{
    name: '数据点',
    type: 'scatter',
    symbolSize: 20,
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58],
      [9.0, 8.81],
      [11.0, 8.33],
      [14.0, 9.96],
      [6.0, 7.24],
      [4.0, 4.26],
      [12.0, 10.84],
      [7.0, 4.82],
      [5.0, 5.68]
    ]
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="scatterChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 雷达图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>雷达图</h3>
          <button class="code-toggle" @click="toggleCode('radar')">
            {{ showCode.radar ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.radar">
            <pre class="code-viewer"><code>// 雷达图配置
const radarOption = {
  title: {
    text: '雷达图示例'
  },
  tooltip: {},
  legend: {
    data: ['预算分配', '实际开销']
  },
  radar: {
    indicator: [
      { name: '销售', max: 6000 },
      { name: '管理', max: 15000 },
      { name: '信息技术', max: 30000 },
      { name: '客服', max: 35000 },
      { name: '研发', max: 50000 },
      { name: '市场', max: 25000 }
    ],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.2)'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.2)'
      }
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.05)']
      }
    }
  },
  series: [{
    name: '预算 vs 开销',
    type: 'radar',
    data: [
      {
        value: [4300, 10000, 28000, 35000, 50000, 19000],
        name: '预算分配',
        areaStyle: {
          opacity: 0.3
        }
      },
      {
        value: [5000, 14000, 28000, 31000, 42000, 21000],
        name: '实际开销',
        areaStyle: {
          opacity: 0.3
        }
      }
    ]
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="radarChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 地图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>地图</h3>
          <button class="code-toggle" @click="toggleCode('map')">
            {{ showCode.map ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.map">
            <pre class="code-viewer"><code>// 地图配置
const mapOption = {
  title: {
    text: '中国地图示例'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}'
  },
  visualMap: {
    min: 0,
    max: 1000,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['lightskyblue', 'yellow', 'orangered']
    }
  },
  series: [{
    name: '中国',
    type: 'map',
    map: 'china',
    emphasis: {
      label: {
        show: true
      }
    },
    data: [
      { name: '北京', value: 1000 },
      { name: '上海', value: 800 },
      { name: '广东', value: 600 },
      { name: '浙江', value: 400 },
      { name: '江苏', value: 300 }
    ]
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="mapChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 动态数据图表 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>动态数据</h3>
          <button class="code-toggle" @click="toggleCode('dynamic')">
            {{ showCode.dynamic ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.dynamic">
            <pre class="code-viewer"><code>// 动态数据图表配置
const dynamicOption = {
  title: {
    text: '动态数据示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: timeData
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '实时数据',
    type: 'line',
    data: dynamicData,
    animation: true
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="dynamicChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 交互事件图表 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>交互事件</h3>
          <button class="code-toggle" @click="toggleCode('interactive')">
            {{ showCode.interactive ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.interactive">
            <pre class="code-viewer"><code>// 交互事件图表配置
const interactiveOption = {
  title: {
    text: '点击交互示例'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [{
    type: 'pie',
    radius: '60%',
    data: interactiveData,
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="interactiveChart" class="chart"></div>
            </div>
            <div class="event-log">
              <h4>事件日志：</h4>
              <div class="log-content">
                <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
                  {{ log }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热力图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>热力图</h3>
          <button class="code-toggle" @click="toggleCode('heatmap')">
            {{ showCode.heatmap ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.heatmap">
            <pre class="code-viewer"><code>// 热力图配置
const heatmapOption = {
  title: {
    text: '热力图示例'
  },
  tooltip: {
    position: 'top'
  },
  grid: {
    top: '15%'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: ['上午', '下午', '晚上'],
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    top: '0%'
  },
  series: [{
    name: '访问量',
    type: 'heatmap',
    data: heatmapData,
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="heatmapChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 漏斗图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>漏斗图</h3>
          <button class="code-toggle" @click="toggleCode('funnel')">
            {{ showCode.funnel ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.funnel">
            <pre class="code-viewer"><code>// 漏斗图配置
const funnelOption = {
  title: {
    text: '转化漏斗'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  legend: {
    data: ['展现', '点击', '访问', '咨询', '订单']
  },
  series: [
    {
      name: '转化率',
      type: 'funnel',
      left: '10%',
      width: '80%',
      label: {
        formatter: '{b}转化率: {c}%'
      },
      labelLine: {
        show: true
      },
      itemStyle: {
        opacity: 0.7
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}转化率: {c}%'
        }
      },
      data: [
        { value: 100, name: '展现' },
        { value: 80, name: '点击' },
        { value: 60, name: '访问' },
        { value: 40, name: '咨询' },
        { value: 20, name: '订单' }
      ]
    }
  ]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="funnelChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 仪表盘 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>仪表盘</h3>
          <button class="code-toggle" @click="toggleCode('gauge')">
            {{ showCode.gauge ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.gauge">
            <pre class="code-viewer"><code>// 仪表盘配置
const gaugeOption = {
  title: {
    text: '仪表盘示例'
  },
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [{
    name: '业务指标',
    type: 'gauge',
    detail: {
      formatter: '{value}%',
      color: 'inherit'
    },
    data: [{
      value: gaugeValue,
      name: '完成率'
    }],
    axisLine: {
      lineStyle: {
        color: [
          [0.3, '#ff6e76'],
          [0.7, '#fddd60'],
          [1, '#7cffb2']
        ],
        width: 30
      }
    }
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="gaugeChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 树图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>树图</h3>
          <button class="code-toggle" @click="toggleCode('tree')">
            {{ showCode.tree ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.tree">
            <pre class="code-viewer"><code>// 树图配置
const treeOption = {
  title: {
    text: '技术栈树图'
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [{
    type: 'tree',
    data: [treeData],
    top: '10%',
    left: '8%',
    bottom: '22%',
    right: '20%',
    symbolSize: 7,
    label: {
      position: 'left',
      verticalAlign: 'middle',
      align: 'right',
      fontSize: 14
    },
    leaves: {
      label: {
        position: 'right',
        verticalAlign: 'middle',
        align: 'left'
      }
    },
    emphasis: {
      focus: 'descendant'
    },
    expandAndCollapse: true,
    animationDuration: 550,
    animationDurationUpdate: 750
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="treeChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 关系图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>关系图</h3>
          <button class="code-toggle" @click="toggleCode('graph')">
            {{ showCode.graph ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.graph">
            <pre class="code-viewer"><code>// 关系图配置
const graphOption = {
  title: {
    text: '技术生态关系图'
  },
  tooltip: {},
  legend: [{
    data: ['框架', '语言', '工具']
  }],
  series: [{
    name: '技术生态',
    type: 'graph',
    layout: 'force',
    data: graphData.nodes,
    links: graphData.links,
    categories: graphData.categories,
    roam: true,
    label: {
      show: true,
      position: 'right'
    },
    force: {
      repulsion: 100
    }
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="graphChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 水球图 -->
      <div class="demo-card">
        <div class="demo-header">
          <h3>水球图</h3>
          <button class="code-toggle" @click="toggleCode('liquidfill')">
            {{ showCode.liquidfill ? '隐藏代码' : '查看代码' }}
          </button>
        </div>
        <div class="demo-content">
          <div class="code-block" v-if="showCode.liquidfill">
            <pre class="code-viewer"><code>// 水球图配置
const liquidfillOption = {
  title: {
    text: '水球图示例'
  },
  series: [{
    type: 'liquidFill',
    data: [0.6, 0.5, 0.4, 0.3],
    radius: '70%',
    color: ['#7cffb2', '#58f4b8', '#37e6bc', '#1ed6bd'],
    backgroundStyle: {
      borderWidth: 1,
      borderColor: 'rgba(255,255,255,0.1)',
      color: 'rgba(255,255,255,0.1)'
    },
    label: {
      color: '#fff'
    },
    outline: {
      show: false
    }
  }]
}</code></pre>
          </div>
          <div class="demo-preview">
            <div class="chart-container">
              <div ref="liquidfillChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import chinaMap from '../../assets/map/china.json'
import 'echarts-liquidfill'
import 'echarts/theme/dark'
import 'echarts/theme/vintage'
import 'echarts/theme/macarons'

// 注册中国地图
echarts.registerMap('china', chinaMap)

// 主题相关
const currentTheme = ref('default')
const chartInstances = ref([])

// 动态数据相关
const dynamicChart = ref(null)
let dynamicChartInstance = null
const timeData = ref([])
const dynamicData = ref([])
let dynamicTimer = null

// 交互事件相关
const interactiveChart = ref(null)
let interactiveChartInstance = null
const eventLogs = ref([])
const interactiveData = ref([
  { value: 335, name: '直接访问' },
  { value: 234, name: '联盟广告' },
  { value: 1548, name: '搜索引擎' }
])

// 现有的代码显示状态
const showCode = ref({
  basic: false,
  pie: false,
  bar: false,
  scatter: false,
  radar: false,
  map: false,
  dynamic: false,
  interactive: false,
  heatmap: false,
  funnel: false,
  gauge: false,
  tree: false,
  graph: false,
  liquidfill: false
})

const toggleCode = (section) => {
  showCode.value[section] = !showCode.value[section]
}

// 图表实例
const basicChart = ref(null)
const pieChart = ref(null)
const barChart = ref(null)
const scatterChart = ref(null)
const radarChart = ref(null)
const mapChart = ref(null)

// 图表实例对象
let basicChartInstance = null
let pieChartInstance = null
let barChartInstance = null
let scatterChartInstance = null
let radarChartInstance = null
let mapChartInstance = null

// 新图表的引用
const heatmapChart = ref(null)
const funnelChart = ref(null)
const gaugeChart = ref(null)
const treeChart = ref(null)
const graphChart = ref(null)
const liquidfillChart = ref(null)

// 新图表的实例
let heatmapChartInstance = null
let funnelChartInstance = null
let gaugeChartInstance = null
let treeChartInstance = null
let graphChartInstance = null
let liquidfillChartInstance = null

// 热力图数据生成
const generateHeatmapData = () => {
  const data = []
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 3; j++) {
      data.push([i, j, Math.round(Math.random() * 100)])
    }
  }
  return data
}

// 仪表盘数据
const gaugeValue = ref(50)
let gaugeTimer = null

// 热力图数据
const heatmapData = ref(generateHeatmapData())

// 热力图配置
const heatmapOption = {
  title: {
    text: '热力图示例'
  },
  tooltip: {
    position: 'top'
  },
  grid: {
    top: '15%'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: ['上午', '下午', '晚上'],
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    top: '0%'
  },
  series: [{
    name: '访问量',
    type: 'heatmap',
    data: heatmapData.value,
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}

// 漏斗图配置
const funnelOption = {
  title: {
    text: '转化漏斗'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  legend: {
    data: ['展现', '点击', '访问', '咨询', '订单']
  },
  series: [
    {
      name: '转化率',
      type: 'funnel',
      left: '10%',
      width: '80%',
      label: {
        formatter: '{b}转化率: {c}%'
      },
      labelLine: {
        show: true
      },
      itemStyle: {
        opacity: 0.7
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}转化率: {c}%'
        }
      },
      data: [
        { value: 100, name: '展现' },
        { value: 80, name: '点击' },
        { value: 60, name: '访问' },
        { value: 40, name: '咨询' },
        { value: 20, name: '订单' }
      ]
    }
  ]
}

// 仪表盘配置
const gaugeOption = {
  title: {
    text: '仪表盘示例'
  },
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [{
    name: '业务指标',
    type: 'gauge',
    detail: {
      formatter: '{value}%',
      color: 'inherit'
    },
    data: [{
      value: gaugeValue.value,
      name: '完成率'
    }],
    axisLine: {
      lineStyle: {
        color: [
          [0.3, '#ff6e76'],
          [0.7, '#fddd60'],
          [1, '#7cffb2']
        ],
        width: 30
      }
    }
  }]
}

// 树图数据
const treeData = {
  name: '前端技术栈',
  children: [
    {
      name: '基础',
      children: [
        { name: 'HTML5' },
        { name: 'CSS3' },
        { name: 'JavaScript' }
      ]
    },
    {
      name: '框架',
      children: [
        { name: 'Vue' },
        { name: 'React' },
        { name: 'Angular' }
      ]
    },
    {
      name: '工具',
      children: [
        { name: 'Webpack' },
        { name: 'Vite' },
        { name: 'TypeScript' }
      ]
    }
  ]
}

// 关系图数据
const graphData = {
  nodes: [
    { name: 'Vue', category: 0, symbolSize: 50 },
    { name: 'React', category: 0, symbolSize: 50 },
    { name: 'JavaScript', category: 1, symbolSize: 40 },
    { name: 'TypeScript', category: 1, symbolSize: 40 },
    { name: 'Webpack', category: 2, symbolSize: 30 },
    { name: 'Vite', category: 2, symbolSize: 30 }
  ],
  links: [
    { source: 'Vue', target: 'JavaScript' },
    { source: 'Vue', target: 'TypeScript' },
    { source: 'React', target: 'JavaScript' },
    { source: 'React', target: 'TypeScript' },
    { source: 'Webpack', target: 'Vue' },
    { source: 'Vite', target: 'Vue' }
  ],
  categories: [
    { name: '框架' },
    { name: '语言' },
    { name: '工具' }
  ]
}

// 树图配置
const treeOption = {
  title: {
    text: '技术栈树图'
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [{
    type: 'tree',
    data: [treeData],
    top: '10%',
    left: '8%',
    bottom: '22%',
    right: '20%',
    symbolSize: 7,
    label: {
      position: 'left',
      verticalAlign: 'middle',
      align: 'right',
      fontSize: 14
    },
    leaves: {
      label: {
        position: 'right',
        verticalAlign: 'middle',
        align: 'left'
      }
    },
    emphasis: {
      focus: 'descendant'
    },
    expandAndCollapse: true,
    animationDuration: 550,
    animationDurationUpdate: 750
  }]
}

// 关系图配置
const graphOption = {
  title: {
    text: '技术生态关系图'
  },
  tooltip: {},
  legend: [{
    data: ['框架', '语言', '工具']
  }],
  series: [{
    name: '技术生态',
    type: 'graph',
    layout: 'force',
    data: graphData.nodes,
    links: graphData.links,
    categories: graphData.categories,
    roam: true,
    label: {
      show: true,
      position: 'right'
    },
    force: {
      repulsion: 100
    }
  }]
}

// 水球图配置
const liquidfillOption = {
  title: {
    text: '水球图示例'
  },
  series: [{
    type: 'liquidFill',
    data: [0.6, 0.5, 0.4, 0.3],
    radius: '70%',
    color: ['#7cffb2', '#58f4b8', '#37e6bc', '#1ed6bd'],
    backgroundStyle: {
      borderWidth: 1,
      borderColor: 'rgba(255,255,255,0.1)',
      color: 'rgba(255,255,255,0.1)'
    },
    label: {
      color: '#fff'
    },
    outline: {
      show: false
    }
  }]
}

// 更新仪表盘数据
const updateGauge = () => {
  if (!gaugeChartInstance || gaugeChartInstance.isDisposed()) return
  
  gaugeValue.value = Math.round(Math.random() * 100)
  gaugeChartInstance.setOption({
    series: [{
      data: [{
        value: gaugeValue.value
      }]
    }]
  })
}

// 基础图表配置
const basicOption = {
  title: {
    text: '基础折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }]
}

// 饼图配置
const pieOption = {
  title: {
    text: '访问来源',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' },
      { value: 484, name: '联盟广告' },
      { value: 300, name: '视频广告' }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}

// 柱状图配置
const barOption = {
  title: {
    text: '柱状图示例'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
  },
  series: [
    {
      name: '2011年',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012年',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
}

// 散点图配置
const scatterOption = {
  title: {
    text: '散点图示例'
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'value',
    name: 'X轴'
  },
  yAxis: {
    type: 'value',
    name: 'Y轴'
  },
  series: [{
    name: '数据点',
    type: 'scatter',
    symbolSize: 20,
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58],
      [9.0, 8.81],
      [11.0, 8.33],
      [14.0, 9.96],
      [6.0, 7.24],
      [4.0, 4.26],
      [12.0, 10.84],
      [7.0, 4.82],
      [5.0, 5.68]
    ]
  }]
}

// 雷达图配置
const radarOption = {
  title: {
    text: '雷达图示例'
  },
  tooltip: {},
  legend: {
    data: ['预算分配', '实际开销']
  },
  radar: {
    indicator: [
      { name: '销售', max: 6000 },
      { name: '管理', max: 15000 },
      { name: '信息技术', max: 30000 },
      { name: '客服', max: 35000 },
      { name: '研发', max: 50000 },
      { name: '市场', max: 25000 }
    ],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.2)'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.2)'
      }
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.05)']
      }
    }
  },
  series: [{
    name: '预算 vs 开销',
    type: 'radar',
    data: [
      {
        value: [4300, 10000, 28000, 35000, 50000, 19000],
        name: '预算分配',
        areaStyle: {
          opacity: 0.3
        }
      },
      {
        value: [5000, 14000, 28000, 31000, 42000, 21000],
        name: '实际开销',
        areaStyle: {
          opacity: 0.3
        }
      }
    ]
  }]
}

// 地图配置
const mapOption = {
  title: {
    text: '中国地图示例'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}'
  },
  visualMap: {
    min: 0,
    max: 1000,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['lightskyblue', 'yellow', 'orangered']
    }
  },
  series: [{
    name: '中国',
    type: 'map',
    map: 'china',
    emphasis: {
      label: {
        show: true
      }
    },
    data: [
      { name: '北京', value: 1000 },
      { name: '上海', value: 800 },
      { name: '广东', value: 600 },
      { name: '浙江', value: 400 },
      { name: '江苏', value: 300 }
    ]
  }]
}

// 初始化动态数据
const initDynamicData = () => {
  const now = new Date()
  for (let i = 0; i < 10; i++) {
    timeData.value.push(new Date(now - (10 - i) * 1000).toLocaleTimeString('zh-CN', { hour12: false }))
    dynamicData.value.push(Math.random() * 100)
  }
}

// 更新动态数据
const updateDynamicData = () => {
  if (!dynamicChartInstance || dynamicChartInstance.isDisposed()) return

  const now = new Date()
  timeData.value.shift()
  dynamicData.value.shift()
  timeData.value.push(now.toLocaleTimeString('zh-CN', { hour12: false }))
  dynamicData.value.push(Math.random() * 100)
  
  dynamicChartInstance.setOption({
    xAxis: {
      data: timeData.value
    },
    series: [{
      data: dynamicData.value
    }]
  })
}

// 动态图表配置
const dynamicOption = {
  title: {
    text: '动态数据示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: timeData.value
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '实时数据',
    type: 'line',
    data: dynamicData.value,
    animation: true
  }]
}

// 交互图表配置
const interactiveOption = {
  title: {
    text: '点击交互示例'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [{
    type: 'pie',
    radius: '60%',
    data: interactiveData.value,
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}

// 主题切换
const changeTheme = () => {
  // 备份所有实例的数据状态
  const instanceStates = chartInstances.value.map(instance => {
    if (!instance) return null;
    const option = instance.getOption();
    // 移除主题相关的默认配置
    delete option.backgroundColor;
    delete option.textStyle;
    delete option.title.textStyle;
    delete option.legend.textStyle;
    return {
      option,
      isAnimating: instance === dynamicChartInstance || instance === gaugeChartInstance
    };
  });

  // 清除旧实例
  chartInstances.value.forEach(instance => instance?.dispose());
  chartInstances.value = [];

  // 重新初始化所有图表
  if (basicChart.value) {
    basicChartInstance = echarts.init(basicChart.value, currentTheme.value);
    basicChartInstance.setOption(instanceStates[0]?.option || basicOption);
    chartInstances.value.push(basicChartInstance);
  }

  if (pieChart.value) {
    pieChartInstance = echarts.init(pieChart.value, currentTheme.value);
    pieChartInstance.setOption(instanceStates[1]?.option || pieOption);
    chartInstances.value.push(pieChartInstance);
  }

  if (barChart.value) {
    barChartInstance = echarts.init(barChart.value, currentTheme.value);
    barChartInstance.setOption(instanceStates[2]?.option || barOption);
    chartInstances.value.push(barChartInstance);
  }

  if (scatterChart.value) {
    scatterChartInstance = echarts.init(scatterChart.value, currentTheme.value);
    scatterChartInstance.setOption(instanceStates[3]?.option || scatterOption);
    chartInstances.value.push(scatterChartInstance);
  }

  if (radarChart.value) {
    radarChartInstance = echarts.init(radarChart.value, currentTheme.value);
    radarChartInstance.setOption(instanceStates[4]?.option || radarOption);
    chartInstances.value.push(radarChartInstance);
  }

  if (mapChart.value) {
    mapChartInstance = echarts.init(mapChart.value, currentTheme.value);
    mapChartInstance.setOption(instanceStates[5]?.option || mapOption);
    chartInstances.value.push(mapChartInstance);
  }

  if (dynamicChart.value) {
    dynamicChartInstance = echarts.init(dynamicChart.value, currentTheme.value);
    dynamicChartInstance.setOption(instanceStates[6]?.option || dynamicOption);
    chartInstances.value.push(dynamicChartInstance);
  }

  if (interactiveChart.value) {
    interactiveChartInstance = echarts.init(interactiveChart.value, currentTheme.value);
    interactiveChartInstance.setOption(instanceStates[7]?.option || interactiveOption);
    interactiveChartInstance.on('click', (params) => {
      addEventLog(`点击了 ${params.name}：${params.value}`);
    });
    chartInstances.value.push(interactiveChartInstance);
  }

  if (heatmapChart.value) {
    heatmapChartInstance = echarts.init(heatmapChart.value, currentTheme.value);
    heatmapChartInstance.setOption(instanceStates[8]?.option || heatmapOption);
    chartInstances.value.push(heatmapChartInstance);
  }

  if (funnelChart.value) {
    funnelChartInstance = echarts.init(funnelChart.value, currentTheme.value);
    funnelChartInstance.setOption(instanceStates[9]?.option || funnelOption);
    chartInstances.value.push(funnelChartInstance);
  }

  if (gaugeChart.value) {
    gaugeChartInstance = echarts.init(gaugeChart.value, currentTheme.value);
    gaugeChartInstance.setOption(instanceStates[10]?.option || gaugeOption);
    chartInstances.value.push(gaugeChartInstance);
  }

  if (treeChart.value) {
    treeChartInstance = echarts.init(treeChart.value, currentTheme.value);
    treeChartInstance.setOption(instanceStates[11]?.option || treeOption);
    chartInstances.value.push(treeChartInstance);
  }

  if (graphChart.value) {
    graphChartInstance = echarts.init(graphChart.value, currentTheme.value);
    graphChartInstance.setOption(instanceStates[12]?.option || graphOption);
    chartInstances.value.push(graphChartInstance);
  }

  if (liquidfillChart.value) {
    liquidfillChartInstance = echarts.init(liquidfillChart.value, currentTheme.value);
    liquidfillChartInstance.setOption(instanceStates[13]?.option || liquidfillOption);
    chartInstances.value.push(liquidfillChartInstance);
  }

  // 重新启动定时器
  if (dynamicTimer) {
    clearInterval(dynamicTimer);
    dynamicTimer = setInterval(updateDynamicData, 1000);
  }

  if (gaugeTimer) {
    clearInterval(gaugeTimer);
    gaugeTimer = setInterval(updateGauge, 2000);
  }
}

// 修改主题选项
const themes = [
  { value: '', label: '默认主题' },
  { value: 'dark', label: '暗色主题' },
  { value: 'vintage', label: '复古主题' },
  { value: 'macarons', label: '马卡龙主题' }
]

// 刷新数据
const refreshData = () => {
  interactiveData.value = interactiveData.value.map(item => ({
    ...item,
    value: Math.floor(Math.random() * 2000)
  }))
  interactiveChartInstance.setOption({
    series: [{
      data: interactiveData.value
    }]
  })
}

// 添加事件日志
const addEventLog = (event) => {
  eventLogs.value.unshift(event)
  if (eventLogs.value.length > 5) {
    eventLogs.value.pop()
  }
}

// 初始化所有图表
const initCharts = () => {
  // 清除现有实例
  chartInstances.value.forEach(instance => {
    instance?.dispose()
  })
  chartInstances.value = []

  // 初始化基础图表
  basicChartInstance = echarts.init(basicChart.value, currentTheme.value)
  basicChartInstance.setOption(basicOption)
  chartInstances.value.push(basicChartInstance)

  // 初始化饼图
  pieChartInstance = echarts.init(pieChart.value, currentTheme.value)
  pieChartInstance.setOption(pieOption)
  chartInstances.value.push(pieChartInstance)

  // 初始化柱状图
  barChartInstance = echarts.init(barChart.value, currentTheme.value)
  barChartInstance.setOption(barOption)
  chartInstances.value.push(barChartInstance)

  // 初始化散点图
  scatterChartInstance = echarts.init(scatterChart.value, currentTheme.value)
  scatterChartInstance.setOption(scatterOption)
  chartInstances.value.push(scatterChartInstance)

  // 初始化雷达图
  radarChartInstance = echarts.init(radarChart.value, currentTheme.value)
  radarChartInstance.setOption(radarOption)
  chartInstances.value.push(radarChartInstance)

  // 初始化地图
  mapChartInstance = echarts.init(mapChart.value, currentTheme.value)
  mapChartInstance.setOption(mapOption)
  chartInstances.value.push(mapChartInstance)

  // 初始化动态数据图表
  dynamicChartInstance = echarts.init(dynamicChart.value, currentTheme.value)
  dynamicChartInstance.setOption(dynamicOption)
  chartInstances.value.push(dynamicChartInstance)

  // 初始化交互事件图表
  interactiveChartInstance = echarts.init(interactiveChart.value, currentTheme.value)
  interactiveChartInstance.setOption(interactiveOption)
  interactiveChartInstance.on('click', (params) => {
    addEventLog(`点击了 ${params.name}：${params.value}`)
  })
  chartInstances.value.push(interactiveChartInstance)

  // 初始化热力图
  heatmapChartInstance = echarts.init(heatmapChart.value, currentTheme.value)
  heatmapChartInstance.setOption(heatmapOption)
  chartInstances.value.push(heatmapChartInstance)

  // 初始化漏斗图
  funnelChartInstance = echarts.init(funnelChart.value, currentTheme.value)
  funnelChartInstance.setOption(funnelOption)
  chartInstances.value.push(funnelChartInstance)

  // 初始化仪表盘
  gaugeChartInstance = echarts.init(gaugeChart.value, currentTheme.value)
  gaugeChartInstance.setOption(gaugeOption)
  chartInstances.value.push(gaugeChartInstance)

  // 初始化树图
  treeChartInstance = echarts.init(treeChart.value, currentTheme.value)
  treeChartInstance.setOption(treeOption)
  chartInstances.value.push(treeChartInstance)

  // 初始化关系图
  graphChartInstance = echarts.init(graphChart.value, currentTheme.value)
  graphChartInstance.setOption(graphOption)
  chartInstances.value.push(graphChartInstance)

  // 初始化水球图
  liquidfillChartInstance = echarts.init(liquidfillChart.value, currentTheme.value)
  liquidfillChartInstance.setOption(liquidfillOption)
  chartInstances.value.push(liquidfillChartInstance)

  // 启动动态数据更新
  if (dynamicTimer) {
    clearInterval(dynamicTimer)
  }
  dynamicTimer = setInterval(updateDynamicData, 1000)

  // 启动仪表盘数据更新
  if (gaugeTimer) {
    clearInterval(gaugeTimer)
  }
  gaugeTimer = setInterval(updateGauge, 2000)
}

// 处理窗口大小变化
const handleResize = () => {
  chartInstances.value.forEach(instance => {
    instance?.resize()
  })
}

onMounted(() => {
  initDynamicData()
  nextTick(() => {
    initCharts()
    window.addEventListener('resize', handleResize)
  })
})

onUnmounted(() => {
  if (dynamicTimer) {
    clearInterval(dynamicTimer)
  }
  if (gaugeTimer) {
    clearInterval(gaugeTimer)
  }
  window.removeEventListener('resize', handleResize)
  chartInstances.value.forEach(instance => {
    if (instance && !instance.isDisposed()) {
      instance.dispose()
    }
  })
})
</script>

<style scoped>
.echarts-demo {
  padding: 2rem;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.demo-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.demo-header h3 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--primary-color);
}

.code-toggle {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #00ff88;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.code-toggle:hover {
  background: rgba(0, 255, 136, 0.2);
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.code-block {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
}

.code-viewer {
  width: 100%;
  margin: 0;
  padding: 1rem;
  background: transparent;
  color: #b8e0d2;
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}

.chart-container {
  width: 100%;
  height: 400px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.chart {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    height: 300px;
  }
}

.control-panel {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-switcher select {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #00ff88;
  padding: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
}

.refresh-btn {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #00ff88;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: rgba(0, 255, 136, 0.2);
}

.event-log {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.log-content {
  max-height: 150px;
  overflow-y: auto;
}

.log-item {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #b8e0d2;
}

.log-item:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .control-panel {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}
</style> 